<template>
  <div class="login-container" v-if="finish">
    <div class="backdrop"></div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="52px">
      <h3>登录后台</h3>
      <el-form-item prop="account">
        <el-input v-model.number="ruleForm.account" placeholder="请输入管理员账号"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="ruleForm.password" placeholder="请输入账户密码"></el-input>
      </el-form-item>
      <el-form-item prop="captcha">
        <el-input v-model="ruleForm.captcha" placeholder="请输入图形验证码" style="float: left;width: 260px;"></el-input>
        <el-image :src="verifyData.img" lazy style="float: right;cursor: pointer;" @click="updateImage"></el-image>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')" style="width: 100%;height: 48px;margin-top: 40px;">立即登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getCaptchaImage, login } from '@/network/user'
import { Message } from 'element-ui'

export default {
  data() {
    return {
      ruleForm: {
        account: '',
        password: '',
        captcha: ''
      },
      finish: false,
      verifyData: {},
      rules: {
        account: [{ required: true, message: '请您输入管理员账号', trigger: 'blur' }],
        password: [{ required: true, message: '请您输入密码', trigger: 'blur' }],
        captcha: [{ required: true, message: '请您输入图形验证码', trigger: 'blur' }]
      }
    }
  },
  methods: {
    enterLogin() {
      document.addEventListener('keypress', (e) => {
        if(e.code === 'Enter' && e.target.tagName === 'INPUT') this.submitForm('ruleForm')
      }) 
    },
    updateImage() {
      getCaptchaImage().then(res => {
        this.verifyData = res.data
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if(valid) {
          const params = {
            image_captcha: this.ruleForm.captcha,
            image_key: this.verifyData.key,
            password: this.ruleForm.password,
            username: this.ruleForm.account
          }
          const { status, data, message } = await login(params);
          if(status !== 0) {
            this.updateImage()
            return Message.error(message)
          }
          localStorage.setItem('token', data.token)
          this.$store.commit('setIsLogin', true)
          this.$router.push({ path: '/dashboard' })
        }
      })
    }
  },
  created() {
    this.enterLogin()
    getCaptchaImage().then(res => {
      this.verifyData = res.data
      this.finish = true
    })
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 1000px;
  height: 600px;
  margin: auto;
  background: #fff;
  border-radius: 4px;
  box-shadow: 20px 20px 100px 0 rgb(84 102 120 / 8%);
  .backdrop {
    width: 468px;
    height: 600px;
    background: url(@/assets/login/loginleft_banner.png) no-repeat center/100% 100%;
  }
  .el-form {
    flex: 0 0 44%;
    h3 {
      margin: 60px 0 80px 48px;
      font-size: 24px;
      font-weight: 400;
    }
    .el-form-item {
      margin-bottom: 46px;
      ::v-deep .el-input__inner {
        height: 48px;
      }
    }
  }
}
</style>